import React, { Component } from 'react';
import { fromLonLat } from 'ol/proj.js';
import XYZ from 'ol/source/XYZ'; /* 使用XYZ地图 */
// import { Tile as TileLayer } from 'ol/layer.js'; /* 矢量图层数据，样式整合 */
import { Draw, Modify, Snap } from 'ol/interaction';
// import { Input, Button } from 'antd';
import mapInfo from '../api/mapinfo';
class OlHeader extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nowDraw: ''
        }
    }
    /* 渲染不同地图 */
    olMapChange = (e) => {
        var map = this.props.map;
        /* 谷歌 */
        var google = new XYZ({ url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0' });
        /* 高德 */
        var inster7 = new XYZ({ url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=2&style=7&x={x}&y={y}&z={z}' });
        /* 高德卫星 */
        var inster6 = new XYZ({ url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}' });
        /* 炫酷智图 */
        var geoq = new XYZ({ url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}' });
        let baseLayer = map.getLayers().item(0);
        if (e.target.value === '1') {
            baseLayer.setSource(google);
        } else if (e.target.value === '2') {
            baseLayer.setSource(inster7);
        } else if (e.target.value === '3') {
            baseLayer.setSource(inster6);
        } else if (e.target.value === '4') {
            baseLayer.setSource(geoq);
        }
    }
    /* 绘画状态变更 */
    DrawChange = (e) => {
        let drawSelect = e.target.value
        this.props.map.removeInteraction(this.state.nowDraw)
        if (drawSelect === 'None') {
            this.props.HeaderBack(false, 'None', '')
        } else if (drawSelect === 'Update') {
            this.props.HeaderBack(true, 'update', '')
        } else {
            this.beginDraw(drawSelect)
        }
    }
    /* 开始绘画 */
    beginDraw = (drawType) => {
        let source = mapInfo.sourceInfo('LineString');  /* 绘画数据样式 */
        var modify = new Modify({ source: source });
        this.props.map.addInteraction(modify);
        let draw, snap;
        /* 开始绘画 */
        draw = new Draw({
            source: source,
            type: drawType,
            // maxPoints: 5/* 限制绘制点数 */
        });
        this.props.map.addInteraction(draw);
        snap = new Snap({ source: source });
        this.props.map.addInteraction(snap);
        this.setState({ nowDraw: draw })
        /* 调用检测绘画结束 */
        this.saveMapInfo(draw)
    }
    /* 绘画结束保存 */
    saveMapInfo = (draw) => {
        draw.on('drawend', (e) => {
            let drawType, id, info;
            let list = JSON.parse(localStorage.getItem('featureList')) || []
            drawType = e.target.type_;
            id = new Date().getTime()
            info = { id: id, type: e.target.type_, coordinates: e.feature.getGeometry().getCoordinates(), title: '', remark: '', src: '', pressure: '' }
            list.push(info);
            localStorage.setItem('featureList', JSON.stringify(list))
            this.props.HeaderBack(true, drawType, info)
        })
    }
    /* 运动定位 */
    position(mapView) {
        document.getElementById("pan-to-london").addEventListener("click", () => {
            var longitude = document.getElementById("longitude").value
            var latitude = document.getElementById("latitude").value
            var istanbul = fromLonLat([120, 40]);
            if (longitude && latitude) {
                mapView.animate({
                    center: istanbul,
                    projection: 'EPSG:3857',/* 指定投影使用EPSG:4326 */
                    duration: 2000,
                    zoom: 6
                });
            }
        });
    }
    render() {
        return (
            <div className='ol-head flexct'>
                <label>底图: &nbsp;</label>
                <select defaultValue='1' style={{ width: 120, height: 32, borderRadius: 5 }} onChange={this.olMapChange}>
                    <option value="1">谷歌</option>
                    <option value="2">高德</option>
                    <option value="3">高德卫星</option>
                    <option value="4">炫酷</option>
                </select>
                &nbsp;&nbsp;
                {/* 绘图 */}
                <label>类型: &nbsp;</label>
                <select defaultValue='1' id="drawtype" style={{ width: 120, height: 32, borderRadius: 5 }} onChange={this.DrawChange}>
                    <option value="None">无</option>
                    <option value="Point">点</option>
                    <option value="LineString">线</option>
                    <option value="Update">修改</option>
                </select>
                {/* <Button onClick={this.updaeStyle}>一键换肤</Button>
                <Button onClick={this.updaeStyleTwo}>变更换肤</Button> */}
            </div>
        )
    }
}
export default OlHeader;
